<template>
  <view class="container">
    <!-- 滚动容器 -->
    <scroll-view class="scroll-container" scroll-y>
      <!-- 图片列表 -->
      <view 
        v-for="(item, index) in imageList" 
        :key="index" 
        class="image-card"
      >
        <image 
          class="full-image" 
          :src="item.url" 
          mode="widthFix"
        />
        <view class="image-caption">
          {{ item.description }}
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 模拟图片数据
const imageList = ref([
  {
    url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ufVHO-woCNXAXv4BA9VbSwHaE0?rs=1&pid=ImgDetMain?random=1',
    description: '第一张示例图片说明文字，这里可以描述图片内容'
  },
  {
    url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ufVHO-woCNXAXv4BA9VbSwHaE0?rs=1&pid=ImgDetMain?random=2',
    description: '第二张图片的说明信息，不同尺寸的示例文字'
  },
  {
    url: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.ufVHO-woCNXAXv4BA9VbSwHaE0?rs=1&pid=ImgDetMain?random=3',
    description: '第三张展示图片的文字描述内容'
  }
]);


// const fetchImages = () => {
//   // 实际项目中替换为真实的API调用
//   setTimeout(() => {
//     imageList.value.push({
//       url: 'https://picsum.photos/750/500?random=4',
//       description: '模拟加载的新图片说明'
//     });
//   }, 1500);
// };

// // 初始化加载数据
// fetchImages();
</script>

<style scoped>
/* 容器样式 */
.container {
  height: 100vh;
  background-color: #f5f5f5;
}

/* 滚动容器 */
.scroll-container {
  height: 100%;
}

/* 图片卡片样式 */
.image-card {
  margin: 20rpx;
  background: white;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}

/* 图片样式 */
.full-image {
  width: 100%;
  height: 500rpx; /* 固定高度 */
  object-fit: cover;
}

/* 图片说明文字 */
.image-caption {
  padding: 20rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

/* 加载更多提示 */
.load-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
}
</style>